
<template>
  <div class="paixu">
    <div @click="noneclick" class="none">
      <ul class="top">
        <li>
          <span>综合排序</span>
          <ul class="typenav2">
            <li><span class="iconfont">&#xe601;</span><span>距离最近</span></li>
            <li @click="xuanran(2)">
              <span class="iconfont">&#xe667;</span><span>评分最高</span>
            </li>
            <li><span class="iconfont">&#xe66c;</span><span>销量最高</span></li>
            <li @click="xuanran(3)">
              <span class="iconfont">&#xe666;</span><span>起送价最低</span>
            </li>
            <li @click="xuanran(4)">
              <span class="iconfont">&#xe9ce;</span><span>送单速度最快</span>
            </li>
            <li @click="xuanran(5)">
              <span class="iconfont">&#xe654;</span><span>配送费最低</span>
            </li>
          </ul>
        </li>
        <li @click="xuanran(0)"><span>离我最近</span></li>
        <li @click="xuanran(1)"><span>销量最高</span></li>
        <li>
          <span>筛选</span>
          <ul class="typenav">
            <h4>优惠活动</h4>
            <div class="tn">
              <li>
                <span class="iconfont">&#xe642;</span><span>首单立减</span>
              </li>
              <li>
                <span class="iconfont">&#xe642;</span><span>新用户立减</span>
              </li>
              <li>
                <span class="iconfont">&#xe642;</span><span>下单满减</span>
              </li>
              <li>
                <span class="iconfont">&#xe66e;</span><span>下单满赠</span>
              </li>
              <li>
                <span class="iconfont">&#xe697;</span><span>领券下单</span>
              </li>
              <li><span class="iconfont">&#xe697;</span><span>会员券</span></li>
              <li>
                <span class="iconfont">&#xe9ce;</span><span>免配送费</span>
              </li>
              <li>
                <span class="iconfont">&#xe64b;</span><span>支持自提</span>
              </li>
            </div>
          </ul>
        </li>
      </ul>
    </div>
    <ul class="nav">
      <li class="zhpx" @click="shaixuan('.typenav2', '.typenav')">
        综合排序<span class="iconfont">&#xe772;</span>
      </li>
      <li @click="xuanran(0)">离我最近</li>
      <li @click="xuanran(1)">销量最高</li>
      <li class="sx" @click="shaixuan('.typenav', '.typenav2')">
        筛选<span class="iconfont">&#xe772;</span>
      </li>
    </ul>
    <ul class="type">
      <li>首单立减</li>
      <li>减配送费</li>
      <li>进店送券</li>
      <li>立减优惠</li>
    </ul>
    <ul class="shanjia">
      <li v-for="(item, index) in arr1">
        <router-link
          :to="{
            path: '/business/commodity',
            query: { id: item.id, page: 'sp' },
          }"
        >
          <div class="img">
            <img :src="item.src" alt="" />
          </div>
          <div class="right">
            <h3>{{ item.name }}</h3>
            <div class="pf">
              <span class="iconfont">&#xe685;</span>
              <span class="iconfont">&#xe685;</span>
              <span class="iconfont">&#xe685;</span>
              <span class="iconfont">&#xe685;</span>
              <span class="iconfont">&#xe667;</span>
              <span class="yx">月售 {{ item.yx }}</span>
              <div class="rig">
                <span>{{ item.sj }}分钟 | </span>
                <span>{{ item.jl }}km</span>
              </div>
            </div>
            <div class="qs">
              <div>
                <span>起送价￥{{ item.qs }}</span>
                <span>{{ item.ps }}</span>
              </div>
            </div>
            <ul class="shangpin">
              <li v-for="sitem in arr2[index]">
                <img :src="sitem.img" alt="" />
                <p>{{ sitem.name }}</p>
                <div>
                  <span>￥{{ sitem.jg }}</span>
                  <span>￥{{ sitem.jg - 0 + 2 }}</span>
                </div>
              </li>
            </ul>
          </div>
        </router-link>
      </li>
    </ul>
  </div>
</template>
<style lang="scss" scoped>
.paixu {
  .none {
    position: fixed;
    top: 0;
    display: none;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background-color: rgba(100, 100, 100, 0.5);
  }
  .top {
    padding: 0;
    margin: 0;
    display: flex;
    overflow: hidden;
    justify-content: space-around;
    > li {
      width: 25%;
      > span {
        background-color: white;
        display: block;
        width: 101%;
        text-align: center;
        position: relative;
        font-size: 16px;
        line-height: 50px;
        border-bottom: 1px solid #ccc;
      }
      h4 {
        font-weight: 400;
        padding: 40px;
        margin: 0;
        padding: 10px;
        font-size: 14px;
      }
      ul {
        background-color: white;
        margin: 0;
        padding: 0;
        width: 100%;
        position: absolute;
        li {
          text-align: left;
          width: 100%;
          font-size: 16px;
          line-height: 45px;
          span {
            padding: 5px;
            font-size: 15px;
          }
        }
      }
    }
    li:nth-child(4) ul {
      display: flex;
      flex-wrap: wrap;
      left: 0;
      padding-bottom: 20px;
      .tn {
        display: flex;
        flex-wrap: wrap;
        li {
          margin: 1.1%;
          background-color: rgb(224, 224, 224);
          width: 31%;
          display: flex;
          height: 32px;
          line-height: 25px;
          border-radius: 5px;
          span {
            padding-left: 5px;
            line-height: 23px;
            font-size: 14px;
          }
          span:nth-child(1) {
            font-size: 20px;
            color: red;
          }
        }
      }
    }
    li:nth-child(4) ul {
      display: none;
    }
    li:nth-child(1) ul {
      display: none;
    }
  }
  .nav {
    margin: 0;
    padding: 0;
    width: 100%;
    display: flex;
    height: 50px;
    border-bottom: 1px solid #ccc;
    li {
      width: 25%;
      line-height: 50px;
      text-align: center;
      font-size: 15px;
      font-weight: bold;
      span {
        font-size: 12px;
      }
    }
  }
  .type {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 55px;
    display: flex;
    justify-content: space-around;
    li {
      width: 23%;
      height: 35px;
      margin-top: 10px;
      line-height: 35px;
      background-color: rgb(241, 241, 241);
      border-radius: 3px;
      text-align: center;
      font-size: 14px;
    }
  }
  .shanjia {
    padding: 0;
    padding-bottom: 50px;
    margin: 0;
    width: 100%;
    overflow: hidden;
    > li {
      padding: 12px;
      height: 158px;

      a {
        display: flex;
        img {
          width: 87px;
          height: 60px;
        }
        .right {
          width: 100%;
          margin-left: 10px;
          h3 {
            font-size: 16px;
            margin: 0;
            padding: 0;
            height: 20px;
          }
          .pf {
            width: 75%;
            height: 25px;
            display: flex;
            span {
              display: block;
              font-size: 12px;
              line-height: 25px;
              color: rgb(255, 88, 46);
            }
            .yx {
              font-size: 12px;
              color: black;
              width: 70px;
            }
            .rig {
              width: 100px;
              display: flex;
              margin-left: 25px;
              span {
                color: black;
                font-size: 12px;
              }
            }
          }
          .qs {
            height: 25px;
            div {
              display: flex;
              height: 25px;
              span {
                line-height: 25px;
                font-size: 12px;
                margin-right: 10px;
              }
            }
          }
          .shangpin {
            margin: 0;
            padding: 0;
            width: 100%;
            display: flex;
            li {
              width: 20%;
              margin-right: 20px;
              img {
                width: 80px;
                height: 50px;
              }
              p {
                margin: 0;
                padding: 0;
                font-size: 12px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
              div {
                display: flex;
                height: 30px;
                margin-top: 40px;
                span {
                  margin: 0;
                  padding: 0;
                  margin-top: -40px;
                  font-size: 14px;
                  font-weight: bold;
                  color: red;
                }
                span:nth-child(2) {
                  color: black;
                  font-weight: 400;
                  font-size: 12px;
                  padding: 2px;
                  text-decoration: line-through;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>

<script>
export default {
  name: "paixu",
  data() {
    return {
      arr1: [],
      i: 0,
      arr2: [],
      arr3: [],
      isflas: false,
    };
  },
  methods: {
    noneclick() {
      document.querySelector(".none").style["display"] = "none";
    },
    shaixuan(a, a2) {
      document.querySelector(a).style["display"] = "block";
      document.querySelector(a2).style["display"] = "none";
      document.querySelector(".none").style["display"] = "block";
    },
    xuanran(s) {
      if (s == 0) {
        this.arr3.sort(function (a, b) {
          return a.jl - b.jl;
        });
      } else if (s == 1) {
        this.arr3.sort(function (a, b) {
          return b.yx - a.yx;
        });
      } else if (s == 2) {
        this.arr3.sort(function (a, b) {
          return b.pf - a.pf;
        });
      } else if (s == 3) {
        this.arr3.sort(function (a, b) {
          return a.qs - b.qs;
        });
      } else if (s == 4) {
        this.arr3.sort(function (a, b) {
          return a.sj - b.sj;
        });
      } else if (s == 5) {
        this.arr3.sort(function (a, b) {
          return a.ps - b.ps;
        });
      }
      this.arr1 = this.arr3;
    },
  },
  mounted() {
    let str = this.$route.query.type;
    let name = this.$route.query.name;
    let _this = this;
    let isflas = false;
    let pro = this.$http({
      method: "get",
      url: "/data.json",
      data: {},
    });
    pro.then(function (res) {
      //判断商家参数
      if (str != undefined) {
        for (let j = 0; j < res.data.length; j++) {
          if (res.data[j].type == str) {
            _this.arr1.push(res.data[j]);
            _this.arr3.push(res.data[j]);
          }
        }
        if (str == "add") {
          _this.arr1 = res.data;
          _this.arr3 = res.data;
        }
      } else if (name != undefined) {
        for (let j = 0; j < res.data.length; j++) {
          isflas = false;
          if (!res.data[j].name.indexOf(name)) {
            _this.arr1.push(res.data[j]);
            _this.arr3.push(res.data[j]);
          } else {
            for (let i = 0; i < res.data[j].shop.length; i++) {
              let shopn = res.data[j].shop[i];
              if (shopn.name.indexOf(name) > -1) {
                isflas = true;
              } else if (shopn.type.indexOf(name) > -1) {
                isflas = true;
              }
            }
            if (isflas) {
              _this.arr1.push(res.data[j]);
              _this.arr3.push(res.data[j]);
            }
          }
        }
      } else {
        _this.arr1 = res.data;
        _this.arr3 = res.data;
      }
      // 获取商家商品
      for (let i = 0; i < _this.arr1.length; i++) {
        _this.arr2[i] = _this.arr1[i].shop;
      }
      if (_this.arr1.length == 0) {
        document.querySelector(".shanjia").textContent = "还没有该类型的商家哦";
        document.querySelector(".shanjia").style["color"] = "red";
        document.querySelector(".shanjia").style["textAlign"] = "center";
        document.querySelector(".shanjia").style["marginTop"] = "50px";
      }
    });
  },
};
</script>